<template>
	<view class="contents jbs" style="height: 100vh;">
		<view class="headers">
			<u-search @clickIcon="searchs" @search="searchs" placeholder="科室/医生名称" v-model="keyword" :showAction="false"
				placeholder-color="width">
			</u-search>
			<u-popup v-model="showcode" mode="center">
				<view class="code">
					<!-- <canvas  style="width: 400rpx;height: 400rpx;" canvas-id="couponQrcode"></canvas> -->
					<uv-qrcode ref="qrcode" size="400rpx" :value="user.IDCard"></uv-qrcode>
					<!-- <canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas> -->
					<view class="codetetx">
						<span>姓名：{{user.Name}}</span>
						<span>身份证：{{user.IDCard}}</span>
					</view>
				</view>
			</u-popup>
			<view class="existjiuzhenka bacnone2" v-if="exist==true">
				<view class="existleft">
					<view class="elone">
						<view><span>{{hideInsurantName(user.Name)}}&emsp;</span></view>
						<view class="mr"><span>默认</span></view>
						<!-- <view class="qh" @click="addjzk"><span>切换</span></view> -->
					</view>
					<span>{{hideInsurantName(user.IDCard)}}</span>
					<span>{{hideInsurantName(user.Mobile)}}</span>
				</view>
				<view class="existright" @click="canvas">
					<view class="qrcode">
						<u-image width="150rpx" height="150rpx" src="/static/icon/ewm.png"></u-image>
						<span class="sm bacnone1">扫码就医</span>
					</view>
				</view>
				<view class="existcont">
					<view>
						<view style="width: 30px;float: left; "><u-icon name="/static/icon/yuan.png" size="22"></u-icon>
						</view><span style="float: left;">默认就诊人</span>
					</view>
					<span class="Unbinding" @click="addjzk">切换</span>
				</view>
			</view>
			<view class="jiuzhenka bacnone2" v-else @click="addVisit">
				<view class="headera">
					<!-- <view style="width:13%;float: left;"><u-icon size="80" name="/static/logo.png"></u-icon></view> -->
					<view style="color: white;float: left;">医院预约系统</view>
				</view>
				<view class="textlist">
					<span style="font-size: 20px;font-weight: 600;">就诊卡</span>
					<span style="font-size: 14px;">Medical Card</span>
					<view class="color1"
						style="background-color: white;margin-top: 10px;width: 100%;text-align: center;font-size: 30rpx;font-weight: bold;">
						<span>初次使用请先添加就诊人</span>
					</view>
				</view>
			</view>
			<view class="cont">
				<view class="contlist" @click="Department">
					<view class="contleft color1">
						<u-icon name="/static/icon/yygh.png" size="100"></u-icon>
					</view>
					<view class="contright">
						<span class="conta">预约挂号</span>
						<span class="contb">找专家&emsp;快速预约</span>
					</view>
				</view>
				<view class="contlist" @click="Mknowledge">
					<view class="contleft">
						<u-icon name="/static/icon/jkzx.png" size="120"></u-icon>
					</view>
					<view class="contright">
						<span class="conta">报告查询</span>
						<span class="contb">手机查看&emsp;早知道</span>
					</view>
				</view>
			</view>

		</view>

		<view class="jgc"></view>
		<view class="row">
			<view class="title">
				<span>门诊服务</span>
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(mzlistItem,mzlistIndex) in mzlist" :key="mzlistIndex"
					@click="mzlistclick(mzlistIndex)">
					<view style="">
						<u-icon :name="mzlistItem.name" :size="80"></u-icon>
					</view>
					<view class="">
						<text class="grid-text">{{mzlistItem.title}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="jgc"></view>
		<view class="row">
			<view class="title">
				<span>住院功能</span>
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(zylistItem,zylistIndex) in zylist" :key="zylistIndex"
					@click="zylistclick(zylistIndex)">
					<view style="">
						<u-icon :name="zylistItem.name" :size="80"></u-icon>
					</view>
					<view class="">
						<text class="grid-text">{{zylistItem.title}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>

		<!-- <view class="jgc"></view>
		<view class="row">
			<view class="title">
				<span>体检服务</span>
			</view>
		<u-grid :border="false" col="4">
			<u-grid-item v-for="(tjlistItem,tjlistIndex) in tjlist" :key="tjlistIndex"
				@click="tjlistclick(tjlistIndex)">
				<view style="">
					<u-icon :name="tjlistItem.name" :size="80"></u-icon>
				</view>
				<view class="">
					<text class="grid-text">{{tjlistItem.title}}</text>
				</view>
		
			</u-grid-item>
		</u-grid>
		</view> -->
		<view class="jgc"></view>
		<view class="row">
			<view class="title">
				<span>院内服务</span>
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(ynlistItem,ynlistIndex) in ynlist" :key="ynlistIndex" @click="click(ynlistIndex)">
					<view style="">
						<u-icon :name="ynlistItem.name" :size="80"></u-icon>
					</view>
					<view class="">
						<text class="grid-text">{{ynlistItem.title}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view class="row">
			<view class="title">
				<span>订餐服务</span>
			</view>
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(ynlistItem,ynlistIndex) in dclist" :key="ynlistIndex" @click="click2(ynlistIndex)">
					<view style="">
						<u-icon :name="ynlistItem.name" :size="80"></u-icon>
					</view>
					<view class="">
						<text class="grid-text">{{ynlistItem.title}}</text>
					</view>
				</u-grid-item>
			</u-grid>
		</view>

		<view class=""
			style="width: 100%;display: flex;justify-content: center;padding: 60rpx 30rpx; font-size: 25rpx;">
			<view class="copyright">
				<view class="fleft">安平县人民医院</view>
			</view>
			<view class="copyright">
				<view class="fleft"><span>&emsp;©.</span></view>
				<view class="fleft">徐州市通用科技</view>
			</view>
		</view>
		<view class="dixia">

		</view>

	</view>

</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import UQRCode from 'uqrcodejs';
	import CryptoJS from 'crypto-js'
	//main.js


	export default {
		data() {
			return {
				showcode: false,
				user: {
					Mobile: '暂无',
					IDCard: '暂无',
					Name: '暂无'
				},
				couponQrcode: '123465798',
				exist: false,
				addimg: '/static/tjjzk.png',
				keyword: '',
				src: '/static/gg.png',
				tjlist: [{
						id: '0',
						token: 'ss',
						path: '/pages/zhuyaun/tijian/tijian',
						name: '/static/icon/cfmx.png',
						title: '体检报告'
					},
					// {
					// 	id: '1',
					// 	token: 'sss',
					// 	path: '/pages/MedicalExamination/MedicalExamination',
					// 	name: '/static/icon2/tjyy.png',
					// 	title: '预约体检'
					// },
					// {
					// 	id: '2',
					// 	token: 'sss',
					// 	path: '/pages/MedicalExamination/Record/Record',
					// 	name: '/static/icon2/tjjl.png',
					// 	title: '体检记录'
					// }

				],
				zylist: [
					// {
					// 	id: '1',
					// 	token: 'ss',
					// 	path: '/pages/zhuyaun/bgcx/slbg',
					// 	name: '/static/icon/rqd.png',
					// 	title: '测试页面'
					// },
					{
						id: '1',
						token: 'ss',
						path: '/pages/zhuyaun/charge/charge',
						name: '/static/icon/fyqd.png',
						title: '费用清单'
					},
					{
						id: '3',
						token: 'ss',
						path: '/pages/zhuyaun/myddc/myddc',
						name: '/static/icon/myddc.png',
						title: '住院满意度'
					},
					{
						id: '2',
						token: 'ss',
						path: '/pages/tool/jynotice/rysc',
						name: '/static/icon/rysc.png',
						title: '入院手册'
					},

				],
				mzlist: [{
						id: '5',
						token: 'ss',
						path: '/pages/block/Visit/Visit',
						name: '/static/icon/jzrgl.png',
						title: '就诊人管理'
					},
					{
						id: '0',
						token: 'ss',
						path: '/pages/register/Scheduling/record/record',
						name: '/static/icon/ghjl.png',
						title: '预约记录'
					},
					// {
					// 	id: '2',
					// 	token: 'ss',
					// 	path: '/pages/tool/jynotice/rysc',
					// 	name: '/static/icon/rysc.png',
					// 	title: '入院手册'
					// },
					// {
					// 	id: '2',
					// 	token: 'ss',
					// 	path: '/pages/menzhenmanyidu/myddc',
					// 	name: '/static/icon/rysc.png',
					// 	title: '门诊满意度'
					// },
					// {
					// 	id: '1',
					// 	token: 'ss',
					// 	path: '/pages/outpatient/index/index',
					// 	name: '/static/icon/mzjf.png',
					// 	title: '门诊缴费'
					// },
					{
						id: '0',
						token: 'ss',
						path: '/pages/zhuyaun/charge/chargemz',
						name: '/static/icon/cfmx.png',
						title: '处方明细'
					},


				],
				ynlist: [
					// {
					// 		id: '4',
					// 		token: 'ss',
					// 		path: '/pages/canteen/canteen',
					// 		name: '/static/icon/diancan.png',
					// 		title: '点餐'
					// },
					{
						id: '4',
						token: 'ss',
						path: '/pages/tool/jynotice/jynotice',
						name: '/static/icon/jyxz.png',
						title: '就医须知'
					},
					{
						id: '6',
						token: 'ss',
						path: '/pages/zhuyaun/ksjs/ksjs',
						name: '/static/icon/ksjs3.png',
						title: '科室介绍'
					},
					{
						id: '8',
						token: 'ss',
						path: '/pages/doctor/doctor',
						name: '/static/icon/doctor.png',
						title: '医生介绍'
					},

					// {
					// 	id: '3',
					// 	token: 'ss',
					// 	path: '/pages/MedicalExamination/Health/Health',
					// 	name: '/static/icon/jkzx.png',
					// 	title: '查看体检报告'
					// },
					// {
					// 	id: '3',
					// 	token: 'ss',
					// 	path: '/pages/zhigongmanyidu/zhigongmanyidu',
					// 	name: '/static/icon/wjzr.png',
					// 	title: '职工满意度'
					// },
					// {
					// 	id: '7',
					// 	token: 'ss',
					// 	path: '/pages/navigation/navigation',
					// 	name: '/static/icon/dh.png',
					// 	title: '医院导航'
					// }

				],
				dclist: [
					// {
					// 	id: '4',
					// 	token: 'ss',
					// 	path: '/pages/canteen/canteen',
					// 	name: '/static/icon/diancan.png',
					// 	title: '点餐'
					// },
					{
						id: '4',
						token: 'ss',
						path: '/pages/canteen/canteenList',
						name: '/static/icon/jyxz.png',
						title: '订餐列表'
					},



				]

			}
		},
		computed: {
			...mapState(['token'], ['userInfo']),
			...mapGetters(['hasLogin', 'getUserInfo']),
		},
		
		onLoad() {

			let jsApiList = [
				'checkJsApi',
				'getLocation',
				'openLocation',
				'wx-open-launch-app',
				'wx-open-launch-weapp'
			]
			
			// 引入微信JS SDK

			let url = window.location.href.split('#')[0]
			const script = document.createElement('script');
			let timestamp = Math.round(new Date().getTime() / 1000).toString() // 时间戳
			let nonceStr = this.randomString()  // 随机字符
			let signature = CryptoJS.SHA1(`jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`).toString()

			script.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js";


			document.head.appendChild(script);


			script.onload = () => {


				// 通过后端获取签名等参数
				

				this.getWxConfig().then(config => {


					jWeixin.config({


						debug: false,


						appId: config.appId,


						timestamp: config.timestamp,


						nonceStr: config.nonceStr,


						signature: config.signature,


						jsApiList: ['wx-open-launch-weapp']


					});


					jWeixin.ready(() => {


						console.log('wx.ready');


					});


					jWeixin.error((res) => {


						console.error('wx.error:', res);


					});


				});


			};


		},
		onShow() {

			if (this.hasLogin) {
				//this.$store.dispatch('getUserInfo');
				this.mrjzr()
			} else {
				// this.exist = false
				// return
				this.toWx()
			}

		},
		methods: {
			randomString(len) {
				len = len || 32;
				var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
				var maxPos = $chars.length;
				var pwd = '';
				for (let i = 0; i < len; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return pwd;
			},
			mrjzr() {
				this.$request("patient", "defaultInfo").then(res => {
					//console.log("默认就诊人",res)
					if (res.code == 1) {
						if (res.data) {
							this.user = res.data
							this.exist = true
							console.log(this.user)
						} else {
							this.exist = false
						}

					} else {
						this.exist = false
						// return
						console.log("暂无就诊人")
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: "none",
						// 	duration: 2000,
						// });
					}
				})

			},
			getWxConfig() {


				return new Promise((resolve, reject) => {


					// 模拟请求后端获取签名等参数


					setTimeout(() => {


						resolve({


							appId: 'your_app_id',


							timestamp: 'your_timestamp',


							nonceStr: 'your_nonceStr',


							signature: 'your_signature'


						});


					}, 1000);


				});


			},


			chooseImage() {


				wx.chooseImage({


					count: 1,


					sizeType: ['original', 'compressed'],


					sourceType: ['album', 'camera'],


					success(res) {


						const localIds = res.localIds;


						console.log(localIds);


					}


				});


			},
			toWx() {
				//return
				let code = ''
				uni.showLoading({
					title: '登录中',
					mask: true
				});
				//console.log('登录！')
				// 在需要实现微信公众号登录的地方调用 uni.login() 方法
				//console.log("local")
				// 判断是否是微信内置浏览器
				const isWechat = () => {
					let ua = window.navigator.userAgent.toLowerCase();
					return ua.match(/MicroMessenger/i) == 'micromessenger';
				}
				if (isWechat) {
					//公司
					var appid = 'wx756adecba51373d5';
					//获取路径（要在微信内置浏览器打开，或者是用你部署环境的链接打开）
					let local = window.location.href.split("#")[0];
					//console.log("local", local)
					//拼接在微信时打开的url
					let url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" +
						encodeURIComponent(local) + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
					// 从url中截取code
					code = this.GetParam(window.location.href.split("#")[0], "code");
					console.log("code", code)
					if (!code) {
						window.location.href = url;
					} else {
						this.$request("auth", "wxlogin", {
							Code: code
						}).then(res => {
							console.log(res)
							uni.hideLoading();
							if (res.code == 1) {
								uni.showToast({
									title: '登陆成功',
									icon: 'none',
									duration: 2000
								});
								console.log("123")
								this.$store.commit('setToken', {
									token: res.data.AccessToken,
									mark: res.data.LoginMark,
									expire: res.data.Expires
								});
								console.log("后台返回", res)
								this.mrjzr()
							}
							// this.$dialog.msg('登录成功', 500).then(function() {
						})
						// // 处理截取到的code
						// code = this.GetParam(window.location.href, "code");
						// var openid = localStorage.getItem('openid')
					}
				} else {
					console.log('请在微信客户端打开')
				}
			},
			GetParam(url, code) {
				url = url + "";
				let regstr = "/(\\?|\\&)" + code + "=([^\\&]+)/";
				let reg = eval(regstr);
				//eval可以将 regstr字符串转换为 正则表达式
				let result = url.match(reg);
				if (result && result[2]) {
					return result[2];
				}
			},
			Mknowledge() {
				// let Code = this.$store.state.wledge.Mknowledge
				uni.navigateTo({
					url: '/pages/zhuyaun/newbgcx/newbgcx',
					fail(error) {
						console.log(error)
					}
				})
			},
			Department() {
				uni.navigateTo({
					url: `/pages/register/selectDepartment/selectDepartment`,
					fail(error) {
						console.log(error)
					}
				})
			},
			addVisit() {
				uni.navigateTo({
					url: `/pages/block/addVisit/addVisit`,
					fail(error) {
						console.log(error)
					}
				})
			},
			closeOnClickOverlays() {
				this.showcode = false
			},
			clicks() {
				this.showcode = true
			},
			canvas() {
				this.couponQrCode()
			},
			open() {
				// console.log('open');
			},
			close() {
				this.showcode = false
				// console.log('close');
			},
			couponQrCode() {

				console.log("UQRCode", UQRCode)

				// 获取uQRCode实例
				var qr = new UQRCode();
				// 设置二维码内容
				qr.data = "123456";
				// 设置二维码大小，必须与canvas设置的宽高一致
				qr.size = 200;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();

				this.showcode = true
			},
			bindmarkertap() {
				// 打开的点击事件，传经纬度和地点名
				console.log('走的这里', '中国矿业大学南湖校区');
				wx.openLocation({
					latitude: 34.28568, // 纬度
					longitude: 117.25661, // 经度
					name: '徐州仁慈手外伤专科医院', // 地址名称
					address: '徐州仁慈手外伤专科医院', // 详细地址
					success: function(r) {
						console.log(r)
					},
					fail: function(res) {
						console.log('拉起失败啦', res)
					}
				})
			},
			addjzk() {
				//console.log(this.token)
				let timeId = false
				uni.navigateTo({
					url: `/pages/block/Visit/Visit?doctorinfor=${timeId}`,
					fail(error) {
						console.log(error)
					}
				})
			},
			zylistclick(index) {
				// console.log(index)
				let path = this.zylist[index].path
				if (path != false) {
					// console.log("132")
					uni.navigateTo({
						url: path,
						fail(error) {
							console.log(error)
						}
					})
				} else {
					uni.showToast({
						title: '此模块正在开发',
						icon: 'none',
						duration: 2000
					});
				}
			},
			tjlistclick(index) {
				// console.log(index)
				let path = this.tjlist[index].path
				console.log(path);
				console.log(11111);
				if (path != false) {
					// console.log("132")
					uni.navigateTo({
						url: path,
						fail(error) {
							console.log(error)
						}
					})
				} else {
					uni.showToast({
						title: '此模块正在开发',
						icon: 'none',
						duration: 2000
					});
				}
			},
			mzlistclick(index) {
				console.log(index)
				let path = this.mzlist[index].path
				if (path != false) {
					uni.navigateTo({
						url: path,
						fail(error) {
							console.log(error)
						}
					})
				} else {
					uni.showToast({
						title: '此模块正在开发',
						icon: 'none',
						duration: 2000
					});
				}
			},
			click(index) {

				let path = this.ynlist[index].path
				console.log(path)
				if (path != false) {
					uni.navigateTo({
						url: path,
						fail(error) {
							console.log(error)
						}
					})
				} else {
					uni.showToast({
						title: '此模块正在开发',
						icon: 'none',
						duration: 2000
					});
				}
			},
			click2(index) {

				let path = this.dclist[index].path
				console.log(path)
				if (path != false) {
					uni.navigateTo({
						url: path,
						fail(error) {
							console.log(error)
						}
					})
				} else {
					uni.showToast({
						title: '此模块正在开发',
						icon: 'none',
						duration: 2000
					});
				}
			},
			searchs() {
				let keywords = this.keyword
				uni.navigateTo({
					url: `/pages/doctor/doctor?keyword=${keywords}`,
					fail(error) {
						console.log(error)
					}
				})
			},
			hideInsurantName(val) {
				if (!val || val === '') return ''
				let name = ''
				if (val.length === 2) {
					name = val.substring(0, 1) + '*' // 截取name 字符串截取第一个字符，
				} else if (val.length === 3) {
					name = val.substring(0, 1) + '*' + val.substring(2, 3) // 截取第一个和第三个字符
				} else if (val.length === 4) {
					name = val.substring(0, 2) + '*' + '*' // 4个字隐藏后面两个
				} else if (val.length > 4 && val.length < 11) {
					name = val.substring(0, 1) // 5个字只显示第一个字
					for (let i = 0; i < val.length - 1; i++) {
						name = name + '*'
					}
				} else if (val.length == 18) {
					name = val.substring(0, 6) + '********' + val.substring(14, 18) // 身份证

				} else if (val.length == 11) {
					name = val.substring(0, 3) + '****' + val.substring(7, 11) // 身份证

				}
				return name
			}
		}
	}
</script>

<style>
	@import './index.css'
</style>
<style lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>